.markdown {
  position: relative;
  word-break: break-word;

  & > pre {
    @apply overflow-hidden;
  }

  & :where(h1) {
    @apply font-bold typo-large-title mt-10 mb-7;
    line-height: 1.3;
  }
  & :where(h2) {
    @apply font-medium typo-title1 mt-8 mb-6;
    line-height: 1.4;
  }
  & :where(h3) {
    @apply font-medium typo-title2 mt-8 mb-6;
    line-height: 1.5;
  }
  & :where(h4) {
    @apply typo-body font-bold my-6;
  }
  & :where(h5) {
    @apply text-text-tertiary font-bold typo-markdown my-6;
  }
  & :where(h6) {
    @apply text-text-tertiary font-bold my-6;
  }
  & :where(p) {
    @apply typo-markdown my-6 relative;
  }
  & :where(blockquote) {
    @apply text-xl leading-relaxed italic pl-8 my-8 border-l-4 border-border-subtlest-secondary;

    > p:is(:first-child, :last-child) {
      @apply my-0;
    }

    > p {
      font-size: inherit;
    }
  }
  & :where(pre) {
    @apply typo-markdown relative bg-surface-float my-5 rounded-12 p-4;
  }

  & :where(pre) > code {
    @apply whitespace-pre-wrap font-mono typo-subhead;
    color: var(--theme-highlight-label);
  }
  & :not(pre) > code {
    @apply font-mono text-accent-bun-default bg-surface-float border border-border-subtlest-tertiary typo-footnote py-1 px-1 rounded-6;
  }
  & :where(ul) {
    @apply list-disc my-5 pl-5;
  }
  & :where(ol) {
    @apply list-decimal my-5 pl-5;
  }
  & :where(li) {
    @apply typo-markdown my-3 pl-1;
  }
  & ::marker {
    @apply text-text-secondary;
  }
  & :where(ul ul, ul ol, ol ul, ol ol) {
    @apply typo-markdown my-2;
  }
  & :where(ol p) {
    @apply my-0;
  }
  & :where(a) {
    @apply typo-markdown text-text-link hover:underline;
  }
  & :where(a[data-mention-username]) {
    @apply relative text-text-primary hover:underline bg-text-highlight-default font-bold px-1 rounded-6;

    &:hover {
      @apply bg-text-highlight-hover;
    }
  }
  & :where(hr) {
    @apply border-border-subtlest-secondary my-10;
  }
  & :where(img) {
    @apply rounded-16 max-h-img-mobile tablet:max-h-img-desktop;
  }
  & > :where(:first-child) {
    @apply mt-0;
  }
  & > :where(:last-child) {
    @apply mb-0;
  }
  & :where(pre) :global(:where(.hljs-comment, .hljs-title)) {
    color: var(--theme-highlight-comment);
  }
  &
    :where(pre)
    :global(:where(.hljs-variable, .hljs-attribute, .hljs-tag, .hljs-regexp, .ruby
        .hljs-constant, .xml .hljs-tag .hljs-title, .xml .hljs-pi, .xml
        .hljs-doctype, .html .hljs-doctype, .css .hljs-id, .css
        .hljs-class, .css .hljs-pseudo)) {
    color: var(--theme-highlight-red);
  }
  &
    :where(pre)
    :global(:where(.hljs-number, .hljs-preprocessor, .hljs-built_in, .hljs-literal, .hljs-params, .hljs-constant)) {
    color: var(--theme-highlight-orange);
  }
  &
    :where(pre)
    :global(:where(.ruby .hljs-class .hljs-title, .css
        .hljs-rules
        .hljs-attribute)) {
    color: var(--theme-highlight-yellow);
  }
  &
    :where(pre)
    :global(:where(.hljs-string, .hljs-value, .hljs-inheritance, .hljs-header, .ruby
        .hljs-symbol, .xml .hljs-cdata)) {
    color: var(--theme-highlight-green);
  }
  & :where(pre) :global(:where(.css .hljs-hexcolor)) {
    color: var(--theme-highlight-aqua);
  }
  &
    :where(pre)
    :global(:where(.hljs-function, .python .hljs-decorator, .python
        .hljs-title, .ruby .hljs-function .hljs-title, .ruby
        .hljs-title
        .hljs-keyword, .perl .hljs-sub, .javascript .hljs-title, .coffeescript
        .hljs-title)) {
    color: var(--theme-highlight-blue);
  }

  & :where(pre) :global(:where(.hljs-keyword, .javascript .hljs-function)) {
    color: var(--theme-highlight-purple);
  }
  & :where(pre) :global(:where(.hljs)) {
    display: block;
    color: var(--theme-highlight-label);
    padding: 0.5em;
    font-size: 16px;
    line-height: 1.375;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
  }
  &
    :where(pre)
    :global(:where(.coffeescript .javascript, .javascript .xml, .tex
        .hljs-formula, .xml .javascript, .xml .vbscript, .xml .css, .xml
        .hljs-cdata)) {
    opacity: 0.5;
  }


}
